<template>
	<view class="count">
		<!-- 下面的评论 -->
		<view class="review">
			<view v-for="(item,index) in list" :key="index" class="itemBoy m-t-20">
				<view class="boyTop f f-a-c ">
					<image :src="item.user.avatar" class="avar m-r-25" mode=""></image>
					<view class="phone">
						{{item.user.nickname}}
					</view>
				</view>
				<!-- 内容 -->
				<view class="counent m-t-20 m-b-20">
					{{item.content}}
				</view>
				<!-- 图片 -->
				<view class="image ">
					<view v-if="item.images" class="f f-a-c f-w-w p-r">
						<view v-for="(ite,inde) in item.images.split(',')" :key="inde" class="imgHui m-b-30">
							<image :src="ite" class="imgTu" mode=""></image>
						</view>
					</view>
					<view @click="severy(item)" class="recover">
						回复
					</view>
				</view>
				<!-- 下面的回复 -->
				<view v-if="item.replies.length!=0" class="recoverList p-l-20 p-r-20 p-t-40 m-t-30">
					<view v-for="(it,ind) in item.replies" :key="ind" class="remoList f f-a-e f-j-b p-b-30">
						<view class="left f ">
							<image :src="it.user.avatar" class="toux m-r-20" mode=""></image>
							<view class="touRig">
								<view class="tit">
									{{it.user.nickname}}
								</view>
								<view class="titLiu">
									{{it.content}}
								</view>
							</view>
						</view>
						<!-- <view @click="severy(item,it)" class="right">
							回复
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" border-radius="25" v-model="show">
			<view class="body p-30">
				<view class="recover">
					回复 {{name}}
				</view>
				<textarea name="" v-model="recover" class="text m-t-20 m-b-25" placeholder="请输入回复内容" id="" cols="30"
					rows="10"></textarea>
				<view @click="baocun" class="save">
					保存
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id: 0,
				page: 1,
				list: [],
				total: 0,
				name: '',
				item: {},
				ite: {},
				recover: '', //回复
			}
		},
		onLoad(options) {
			this.id = options.id

			this.initList()
		},
		methods: {
			async initList() {
				let n = await this.$api.CommentList({
					id: this.id,
					page: this.page
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.data]
			},
			// severy() {
			// 	this.show = true
			// },
			// /点击回复
			async severy(item, ite = 0) {
				this.show = true
				if (ite) {
					this.name = ite.user.nickname
				} else {
					this.name = item.user.nickname
				}
				this.item = item
				this.ite = ite
				console.log(item, ite);

			},
			async baocun() {
				let n = await this.$api.ReplyReview({
					op_comment_id: this.item.id,
					reply_user_id: this.ite ? this.ite.user.id : this.item.user.id,
					content: this.recover
				}, this.id)
				this.show = false
				this.recover = ''
				setTimeout(() => {

					this.$msg(n.message)
				}, 1000)
				if (n.status) {
					this.page = 1
					this.list = []
					this.initList()
				}
			},

		},

		onReachBottom() {
			if (this.total == this.list.length) {
				return
			}
			this.page++
			this.initList()
			console.log('1234556');
		}
	}
</script>

<style lang="scss" scoped>
	.recover {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #333333;
	}

	.save {
		width: 690rpx;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin-top: 80rpx;
	}

	.text {
		width: 90%;
		height: 180rpx;
		background: #f9f9f9;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.count {
		padding: 20rpx;
		background-color: #fff;
	}

	.itemBoy {
		padding-bottom: 25rpx;
		border-bottom: 2rpx solid #f8f8f8;

		.image {
			position: relative;

			.recover {
				position: absolute;
				bottom: 10rpx;
				right: 0rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #009d85;
			}

			.imgHui {
				width: 160rpx;
				height: 160rpx;
				background: #f6f6f6;
				border-radius: 8rpx;
				margin-right: 50rpx;
			}

			.imgTu {
				width: 132rpx;
				height: 132rpx;
				margin-top: 50%;
				margin-left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.boyTop {
			.avar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.phone {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #333333;
			}
		}

		.counent {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #333333;
		}
	}

	.touRig {
		width: 80%;
	}

	.recoverList {
		width: 100%;
		background: #f9f9f9;
		border-radius: 16rpx;

		.remoList {
			.left {
				width: 90%;

				.toux {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.titLiu {

		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
	}

	.tit {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
	}
</style>